import React, {Component} from 'react';
import {connect} from "react-redux";
import {Badge, Popconfirm, Popover, message} from "antd";
import {messages} from "share/common";
import {batchOperations} from "components/template/wrapped-table-params/batch-operations";
import TableList from "../../table-list";
import ClaimAmountVerificationRuleDetail from "./detail";
import claimAmountService from "../claim-amount.service";
import "styles/request-and-expense-settings/claim-amount-verification.scss";

@connect(mapStateToProps)
class ClaimAmountVerificationRuleSetting extends Component {

  state = {
    loading: false
  };

  infoData = {
    attributes: [{ title: messages('expense-2.key5')/*说明*/, dataIndex: 'explain', span: 24 }],
    dataSource: {explain: messages('expense-8.key434')/*系统会根据您配置的规则，⾃动对报销单中个⼈⽀付部分的费⽤⾦额进⾏核定（如：超期报销⾃动扣减⾦额），并对核定的费⽤记录原报销⾦额和核定⾦额；报销单中公司⽀付部⻔的费⽤仅做费⽤⾦额核定标记，系统不⾃动核定费⽤⾦额。*/}
  };

  searchForm = [{
    id: 'companyIds',
    dataIndex: 'companies',
    label: messages('expense-2.key40')/*启用公司*/,
    component: 'Chooser',
    props: {
      labelKey: 'name',
      valueKey: 'id',
      type: 'priority_company'
    },
    parser: value => ({
      companyIds: value ? value.map(item => item.id) : null
    })
  }];

  columns = [{
    title: messages('expense-2.key37')/*层级*/,
    dataIndex: 'levelCode',
    width: '10%',
    render: () => messages('expense-2.key39')/*租户*/
  }, {
    title: messages('expense-2.key41')/*所属组织*/,
    dataIndex: 'levelOrgName',
    render: value => <Popover content={value} placement="topLeft">{value}</Popover>
  }, {
    title: messages('expense-2.key40')/*启用公司*/,
    dataIndex: 'companies',
    render: value => {
      let content = '';
      if (value && value.length) {
        content = value.map(item => item.name).join('，');
      } else {
        content = messages('expense-2.key42')/*通用*/;
      }
      return <Popover content={content} placement="topLeft">{content}</Popover>
    }
  }, {
    title: messages('expense-8.key10')/*规则名称*/,
    dataIndex: 'ruleName',
    render: value => <Popover content={value} placement="topLeft">{value}</Popover>
  }, {
    title: messages('expense-8.key116')/*提示内容*/,
    dataIndex: 'ruleDesc',
    render: value => value ? <Popover content={value} placement="topLeft">{value}</Popover> : '-'
  }, {
    title: messages('common.column.status')/*状态*/,
    dataIndex: 'enabled',
    width: '10%',
    render: value => (
      <Badge
        status={value ? 'success' : 'error'}
        text={value ? messages('common.status.enable')/*启用*/ : messages('common.status.disable')/*禁用*/}
      />
    )
  }, {
    title: messages('common.operation')/*操作*/,
    dataIndex: 'id',
    width: '15%',
    render: value => (
      !this.props.authPolicyAll ? '-' : (
        <Popconfirm
          title={messages('common.confirm.delete')/*确定要删除吗？*/}
          onConfirm={() => this.handleDelete(value)}
        >
          <a onClick={e => e.stopPropagation()}>{messages('common.delete')/*删除*/}</a>
        </Popconfirm>
      )
    )
  }];

  handleDelete = id => {
    this.setState({ loading: true });
    claimAmountService.batchDeleteDiscountRule({},[id])
      .then(() => {
        message.success(messages('common.delete.successful')/*删除成功*/);
        this.advancedTableRef.getList();
      })
      .finally(() => {
        this.setState({ loading: false });
      })
  };

  service = (page, size, searchParams) => {
    return claimAmountService.getDiscountList({ page, size, ...searchParams })
  };

  render() {
    const { authPolicyAll } = this.props;
    const { loading } = this.state;
    const tableParams = authPolicyAll ? batchOperations({
      rowKey: 'id'
    }, [{
      type: 'DELETE',
      service: claimAmountService.batchDeleteDiscountRule,
      onOk: () => this.advancedTableRef.getList()
    }], this) : [];
    return (
      <div className="claim-amount-verification-rule-setting">
        <TableList
          disabledEdit={!authPolicyAll}
          infoData={this.infoData}
          slideFrameInfo={{
            title: messages('expense-8.key435')/*核定规则*/,
            content: ClaimAmountVerificationRuleDetail,
            params: { disabled: !authPolicyAll }
          }}
          afterClose={refresh => refresh === true && this.advancedTableRef.getList()}
          tableParams={{
            tableName: 'claim-amount-verification-rule-table',
            loading,
            rowKey: 'id',
            searchForm: this.searchForm,
            columns: this.columns,
            service: this.service,
            onRef: ref => this.advancedTableRef = ref,
            ...tableParams
          }}
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    authPolicyAll: state.main.authPolicyAll
  };
}

export default ClaimAmountVerificationRuleSetting;
